<template>
  <div v-loading="loading" class="list-detail">
    <div class="top">
      <div class="lsdl-top">
        <img :src="require('@/assets/images/iconbg-order.png')">
        <p>
          <span>订单编号：</span>
          <span>{{ ordershop.id }}</span>
        </p>
        <div>
          <span>订单状态：</span>
          <span style="color:#F75757;min-width:112px;">{{ ordershop.orderStatus|orderStatusFilter }}</span>
        </div>
        <div>
          <span>创建时间：</span>
          <p>{{ ordershop.createDate|getDate }}</p>
        </div>
        <div>
          <span>上架时间：</span>
          <p>{{ ordershop.updateDate|getDate }}</p>
        </div>
      </div>
      <div class="user-leave-info">
        <i class="el-icon-caret-top" />
        <div>
          <h4>
            <div>
              <img :src="require('@/assets/images/iconbg-flag.png')" alt>
            </div>
            <span>订单备注：</span>
          </h4>
          <div>{{ ordershop.shopRemarks }}</div>
          <el-button
            type="text"
            @click="dialogFormVisible = true;textarea=ordershop.shopRemarks"
          >修改备注</el-button>
        </div>
        <div v-show="ordershop.userRemarks">
          <h4>
            <div>
              <img :src="require('@/assets/images/iconbg-email.png')" alt>
            </div>
            <span>买家留言：</span>
          </h4>
          <div>{{ ordershop.userRemarks }}</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="ltdl-main">
        <div class="simple-info">
          <h3>买家信息</h3>
          <div>
            <div>
              <span>用户昵称：</span>
              <p v-if="ordershop.buyer">{{ ordershop.buyer }}</p>
              <p v-else>{{ ordershop.phone|phoneChange }}</p>
              <router-link :to="{name: 'Chat', query: {to: ordershop.phone}}"><img style="width:63px;height:20px;cursor:pointer;" :src="require('@/assets/images/icon-btn-callme.png')" alt="联系我"></router-link>
            </div>
            <div>
              <span>用户ID：</span>
              <p>{{ ordershop.userId }}</p>
            </div>
            <div>
              <span>联系电话</span>
              <p>{{ ordershop.phone|phoneChange }}</p>
            </div>
          </div>
        </div>
        <div class="order-info">
          <h3>订单信息</h3>
          <div>
            <div class="top-title">
              <div>
                <div>
                  <span>付款方式：</span>
                  <p>{{ ordershop.orderType === '02300002'?"定金付款":"全额付款" }}</p>
                </div>
                <div v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">
                  <span>优惠券：</span>
                  <p v-if="ordershop.coupon&&ordershop.coupon[0]">-{{ ordershop.coupon|fiterCoupon|fixedPrice }}</p>
                  <p v-else>未使用</p>
                </div>
                <div v-show="ordershop.orderType === '02300002'?true:false">
                  <span v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">实付金额：</span>
                  <p v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">{{ ordershop.amount|fixedPrice }}(含运费：{{ ordershop.freight|fixedPrice }})</p>
                </div>
                <div v-show="ordershop.orderType === '02300002'?false:true" v-if="ordershop.orderStatus === '01500001'?true:false">
                  <span v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">应付金额：</span>
                  <p v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">{{ ordershop.amount|fixedPrice }}(含运费：{{ ordershop.freight|fixedPrice }})</p>
                  <el-link v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true" type="primary" :underline="false" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;ChangeAllprice=ordershop.realAmount / 100;freightPrice=ordershop.realFreight / 100">修改价格</el-link>
                </div>
                <div v-else v-show="ordershop.orderType === '02300002'?false:true">
                  <span v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">运费金额：</span>
                  <p v-show="(ordershop.orderStatus === '01500001' || ordershop.orderStatus === '01500005') && ordershop.orderType === '02300002'?false:true">{{ ordershop.freight|fixedPrice }}</p>
                </div>
              </div>
              <div v-show="ordershop.orderType === '02300001'?true:false" v-if="ordershop.orderStatus === '01500001'?false:true">
                <div>
                  <span>支付金额：</span>
                  <p>{{ ordershop.amount|fixedPrice }}</p>
                </div>
                <div>
                  <span>支付时间：</span>
                  <p>{{ ordershop.createDate|getDate }}</p>
                </div>
                <div>
                  <span>支付方式：</span>
                  <p>{{ ordershop.payType|payTypeFilter }}</p>
                </div>
              </div>
            </div>
            <div class="top">
              <div
                v-if="active===1"
                v-show="ordershop.orderType === '02300002'"
                class="float-one-goods"
              ><div>待付定金：<span class="font-weight600">{{ parseFloat(ordershop.orderperiodization[0].amount)|fixedPrice }}</span></div></div>
              <div
                v-if="active===2"
                v-show="ordershop.orderType === '02300002'"
                class="float-two-money"
              >
                <div>
                  <div v-if="ordershop.orderperiodization&&ordershop.orderperiodization[1]">剩余尾款：{{ ordershop.orderperiodization[1].amount|fixedPrice }}</div>
                  <p>（含运费{{ ordershop.realFreight|fixedPrice }}）</p>
                </div>
              </div>
              <div
                v-if="active===3"
                v-show="ordershop.orderType === '02300002'"
                class="float-send-goods font-weight600"
              ><div>{{ ordershop.orderStatus === '01500003'?'运输中':ordershop.orderStatus === '01500012'?'买家已支付完成，请尽快发货！':'未知情况' }}</div></div>
            </div>
            <!-- <div v-show="ordershop.orderType === '02300002'"> -->
            <div v-if="ordershop.orderType === '02300002'" :style="{ marginTop: active ===4? '-60px' :'0'}">
              <i class="el-icon-caret-bottom" />
              <el-steps :active="active" align-center>
                <el-step />
                <el-step />
                <el-step />
                <el-step />
              </el-steps>
              <div class="order-info-first">
                <div>
                  <span
                    style="font-size:16px;"
                    :class="active===1?'font-weight600':''"
                  >定金付款（{{ ordershop.orderperiodization[0].amount|fixedPrice }}）</span>
                  <!-- >定金付款（{{ (parseFloat(ordershop.orderperiodization[0].amount)/(parseFloat(ordershop.orderperiodization[0].amount) + parseFloat(ordershop.orderperiodization[1].amount))*100).toFixed(0) }}%）</span> -->
                  <p v-show="active === 1?false:true" style="display:flex;flex-flow:row nowrap;min-width:155px;">
                    <span v-if="ordershop.orderperiodization[0].payStatus === '01600001'">{{ ordershop.orderperiodization[0].payType|payTypeFilter }}：</span>
                    <span v-else>未支付：</span>
                    <span
                      style="text-indent:0;"
                    >{{ ordershop.orderperiodization[0].amount|fixedPrice }}</span>
                  </p>
                  <p
                    v-if="ordershop.orderperiodization[0].payStatus === '01600001'"
                    v-show="active === 1?false:true"
                  >{{ ordershop.orderperiodization[0].payDate|getDate }}</p>
                  <p v-else v-show="active === 1?false:true">{{ ordershop.orderperiodization[0].createDate|getDate }}</p>
                </div>
                <div>
                  <span
                    :style="{fontSize: '16px',color:active === 1?'#A8ABB8':''}"
                    :class="active===2?'font-weight600':''"
                  >支付尾款（{{ ordershop.orderperiodization[1].amount|fixedPrice }}）{{ ordershop.payWayCheck2 }}</span>
                  <!-- >支付尾款（{{ (parseFloat(ordershop.orderperiodization[1].amount)/(parseFloat(ordershop.orderperiodization[0].amount) + parseFloat(ordershop.orderperiodization[1].amount))*100).toFixed(0) }}%）{{ ordershop.payWayCheck2 }}</span> -->
                  <p
                    v-show="ordershop.orderperiodization[1].payStatus === '01600002'"
                    v-if="active === 1?false:true"
                    style="width:140px;font-size:12px;"
                  >{{ active===3?orderInfo.endWay+orderInfo.endPay:'尾款支付截止时间' }}</p>
                  <p
                    v-if="active === 1?false:true"
                    v-show="ordershop.orderperiodization[1].payStatus === '01600002'"
                    style="min-width:220px;display:flex;flex-flow:row nowrap;"
                  >
                    <span>{{ ordershop.orderperiodization[1].payEndDate|countdown }}</span>
                    <span
                      v-show="active===2"
                      style="margin:0;color: #1890FF;cursor: pointer;position:relative;"
                      @click="dialogChangeTime = true"
                    >修改时间</span>
                  </p>
                  <p
                    v-show="ordershop.orderperiodization[1].payStatus === '01600001'"
                    v-if="active === 1?false:true"
                    style="display:flex;flex-flow:row nowrap;min-width:155px;"
                  >
                    <span v-if="ordershop.orderperiodization[1].payStatus === '01600001'">{{ ordershop.orderperiodization[1].payType|payTypeFilter }}：</span>
                    <span v-else>未支付：</span>
                    <span
                      style="text-indent:0;"
                    >{{ ordershop.orderperiodization[1].amount|fixedPrice }}</span>
                  </p>
                  <p
                    v-show="ordershop.orderperiodization[1].payStatus === '01600001'"
                    v-if="active === 1?false:true"
                  >{{ ordershop.orderperiodization[1].payDate|getDate }}</p>
                </div>
                <div
                  :style="{color:active === 4?'#3c4353':'#A8ABB8',marginRight:'5px',fontSize:'16px'}"
                  :class="active===3?'font-weight600':''"
                >{{ orderMoney3 }}</div>
                <div
                  style="color:#A8ABB8;margin-right:5px;font-size:16px;"
                  :class="active===4?'font-weight600':''"
                >{{ orderInfo.payWayCheck4 }}</div>
              </div>
            </div>
            <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" :style="{marginTop: ordershop.orderType === '02300002'?'':'-10px'}">
              <thead>
                <tr>
                  <th style="text-align:left;text-indent:20px;">商品</th>
                  <th style="text-indent:0;text-align:left;">商品名称</th>
                  <th>单价</th>
                  <th style="width:84px;">数量</th>
                  <th style="min-width:84px;">状态</th>
                  <th>商品总价</th>
                </tr>
              </thead>
              <tbody>
                <template>
                  <tr v-for="(item,i) in ordershop.orderMdse" :key="i">
                    <td class="table-list-img">
                      <div>
                        <el-image
                          style="width: 80px; height: 80px"
                          :src="qnPath(item.image)"
                          fit="scale-down"
                        >
                          <div slot="error" class="image-slot">
                            <img style="min-width: 80px;max-width:80px; height: 80px" :src="require('../../../../assets/images/background-upload-false.png')" alt="">
                          </div>
                        </el-image>
                      </div>
                    </td>
                    <td class="table-list-name">
                      <div>
                        <div>{{ item.name }}</div>
                        <div style="color:#838A9D;">规格：{{ item.propertyValueName }}</div>
                      </div>
                    </td>
                    <td>
                      <div>{{ item.unitPrice|fixedPrice }}</div>
                    </td>
                    <td style="text-align:center;text-indent:0;">
                      <div>{{ item.buyNum }}</div>
                    </td>
                    <td style="text-align:center;text-indent:0;">
                      <div>
                        <div v-if="item.orderStatus?true:false">{{ '申请退款' }}</div>
                        <div v-else>{{ ordershop.orderStatus|orderStatusFilter }}</div>
                        <div v-show="item.orderStatus?true:false">
                          <el-link
                            type="primary"
                            :underline="false"
                            @click="toSaleAfterDetail(item.rejectedId)"
                          >查看</el-link>
                        </div>
                      </div>
                    </td>
                    <td style="text-align:center;text-indent:0;">
                      <div>{{ ordershop.amount|fixedPrice }}</div>
                    </td>
                  </tr>
                  <tr v-if="ordershop.orderType === '02300002'" class="pre-pay-list">
                    <td>阶段一：定金</td>
                    <td />
                    <td style="border-left:none;" />
                    <td style="border-left:none;" />
                    <td>{{ ordershop.orderperiodization[0].payStatus === '01600001'? '已支付定金' :'等待买家付款' }}</td>
                    <td>
                      <div class="flexCenter">
                        <div>{{ ordershop.orderperiodization[0].amount|fixedPrice }}</div>
                        <el-link v-if="ordershop.orderType==='02300002'&&ordershop.orderperiodization[0].payStatus === '01600002'" type="primary" :underline="false" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;changePriceChildId=ordershop.orderperiodization[0].id;ChangeAllprice=parseFloat(ordershop.orderperiodization[0].amount) / 100;freightPrice= ''">修改价格</el-link>
                      </div>
                    </td>
                  </tr>
                  <tr v-if="ordershop.orderType === '02300002'" class="pre-pay-list">
                    <td>阶段一：尾款</td>
                    <td />
                    <td style="border-left:none;" />
                    <td style="border-left:none;" />
                    <td>{{ ordershop.orderperiodization[1].payStatus === '01600001'&&ordershop.orderperiodization[0].payStatus === '01600001'? '已支付尾款' :ordershop.orderperiodization[0].payStatus === '01600002'?'未开始':'等待买家付款' }}</td>
                    <td>
                      <div class="flexCenter">
                        <div>{{ ordershop.orderperiodization[1].amount|fixedPrice }}</div>
                        <div style="color:#A8ABB8;">（含运费{{ ordershop.realFreight|fixedPrice }}）</div>
                        <el-link v-if="ordershop.orderType==='02300002'&&(ordershop.orderperiodization[1].payStatus === '01600002'&&ordershop.orderperiodization[0].payStatus === '01600001')" type="primary" :underline="false" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;changePriceChildId=ordershop.orderperiodization[1].id;ChangeAllprice=parseFloat(ordershop.orderperiodization[1].amount) / 100;freightPrice=ordershop.realFreight / 100">修改价格</el-link>
                      </div>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
        <!-- <div v-show="ordershop.invoiceRise" class="blii-take-info"> -->
        <div class="blii-take-info">
          <h3>发票信息</h3>
          <div>
            <div class="top">
              <div>
                <span>发票类型：</span>
                <p style="font-weight:600;">{{ 'ordershop.invoiceRise ' }}</p>
              </div>
            </div>
            <div class="top">
              <div>
                <span>公司抬头：</span>
                <p>{{ ordershop.invoiceRise }}</p>
              </div>
              <div>
                <span>公司税号：</span>
                <p>{{ ordershop.taxNumber }}</p>
              </div>
              <div>
                <span>注册地址：</span>
                <p>{{ ordershop.taxNumber }}</p>
              </div>
            </div>
            <div class="top">
              <div>
                <span>注册电话：</span>
                <p>{{ ordershop.invoiceRise }}</p>
              </div>
              <div>
                <span>开户银行：</span>
                <p>{{ ordershop.taxNumber }}</p>
              </div>
              <div>
                <span>银行账户：</span>
                <p>{{ ordershop.taxNumber }}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-show="ordershop.orderStatus === '01500006'" class="blii-take-info">
          <h3>关闭信息</h3>
          <div>
            <div class="top">
              <div>
                <span>关闭时间：</span>
                <p>{{ ordershop.updateDate|getDate }}</p>
              </div>
              <div>
                <span>关闭原因：</span>
                <p
                  style="text-indent:0;"
                >{{ ordershop.payStatus === '01600002'?'超过支付时限':'申请退款导致交易关闭' }}</p>
              </div>
              <div>
                <span />
                <p />
              </div>
            </div>
          </div>
        </div>
        <div class="blii-take-info">
          <h3>物流信息</h3>
          <div>
            <div class="top">
              <div>
                <span>收货人：</span>
                <p>{{ ordershop.buyer }}</p>
              </div>
              <div>
                <span>收货地址：</span>
                <p style="width:254px;">{{ ordershop.expressPhone|phoneChange }}</p>
              </div>
              <div style="margin-left:10%;">
                <span>联系电话：</span>
                <p>{{ ordershop.expressPhone }}</p>
              </div>
            </div>
            <div v-if="ordershop.expressId" class="top">
              <div>
                <span>快递公司：</span>
                <p>{{ ordershop.expressCompany }}</p>
              </div>
              <div>
                <span>快递单号：</span>
                <p style="width:254px;">{{ ordershop.expressId }}</p>
              </div>
              <div style="margin-left:10%;">
                <span>发货时间：</span>
                <p>{{ ordershop.deliveryDate|getDate }}</p>
              </div>
            </div>
            <div v-if="ordershop.expressId" class="main-content">
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp"
                  placement="top"
                >
                  <span>{{ activity.title }}</span>
                  <div class="send-state">
                    <div>{{ activity.week }}</div>
                    <div>
                      <p v-for="(item,i) in activity.content" :key="i">{{ item }}</p>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
        <div class="operate-history">
          <h3>操作历史</h3>
          <div v-for="(item,i) in history" :key="i">
            <div class="history-date" style="color:#A8ABB8;text-align:left;">
              <div>{{ item.date|getDateHistory }}</div>
              <div>{{ item.date|getTimeHistory }}</div>
            </div>
            <div class="history-title">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <router-link to="/order/list">返回</router-link>
      <a v-show="ordershop.orderStatus === '01500002' || ordershop.orderStatus === '01500012'" @click="sendGoddsMoment(ordershop.orderId,ordershop.id)">发货</a>
      <a v-show="ordershop.orderStatus === '01500001' && ordershop.orderType === '02300001'" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;ChangeAllprice=ordershop.realAmount / 100;freightPrice=ordershop.realFreight / 100">修改价格</a>
      <a v-if="ordershop.orderType==='02300002'&&ordershop.orderperiodization[0].payStatus === '01600002'" type="primary" :underline="false" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;changePriceChildId=ordershop.orderperiodization[0].id;ChangeAllprice=parseFloat(ordershop.orderperiodization[0].amount) / 100;freightPrice= ''">修改价格</a>
      <a v-if="ordershop.orderType==='02300002'&&(ordershop.orderperiodization[1].payStatus === '01600002'&&ordershop.orderperiodization[0].payStatus === '01600001')" type="primary" :underline="false" @click="dialogChangePriceVisible = true;changePriceid=ordershop.id;changePriceChildId=ordershop.orderperiodization[1].id;ChangeAllprice=parseFloat(ordershop.orderperiodization[1].amount) / 100;freightPrice=ordershop.realFreight / 100">修改价格</a>

    </div>
    <!-- 遮罩层修改备注 -->
    <el-dialog title="修改备注" :visible.sync="dialogFormVisible">
      <div class="detail-change-remark">
        <div>备注内容：</div>
        <div class="detail-content">
          <el-input
            v-model="textarea"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 200}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRemarks()">确认添加</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 遮罩层修改时间 -->
    <el-dialog title="修改时间" :visible.sync="dialogChangeTime" class="dialog-change-time">
      <div class="detail-change-remark">
        <div style="line-height:36px;min-width:100px;">尾款支付时间：</div>
        <div class="detail-content">
          <el-input v-model="changeDay" placeholder="请输入天数" @change="validateDay(changeDay)" />&emsp;天之后
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogChangeTime = false">确认</el-button>
        <el-button @click="dialogChangeTime = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 遮罩层立即发货 -->
    <!-- <el-dialog title="发货" :visible.sync="dialogMomentSendGodds" class="moment-send-goods-title">
      <div class="moment-send-goods">
        <div class="send-goods-title">
          <div>
            <span>收货人：</span>
            <p>{{ sendGoods.buyer }}</p>
          </div>
          <div>
            <span>收货地址：</span>
            <p>{{ sendGoods.address }}</p>
          </div>
          <div>
            <span>联系电话：</span>
            <p>{{ sendGoods.phone }}</p>
          </div>
        </div>
        <el-form :model="sendGoods">
          <el-form-item label="物流方式：">
            <el-select v-model="sendGoods.company.checked" placeholder="请选择物流方式">
              <el-option
                v-for="(item,i) in sendGoods.company.checkAbout"
                :key="i"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="快递公司：">
            <el-select v-model="sendGoods.type.checked" placeholder="请选择快递公司">
              <el-option
                v-for="(item,i) in sendGoods.type.checkAbout"
                :key="i"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号：" style="display:flex;">
            <el-input v-model="sendGoods.express" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogMomentSendGodds = false">确认</el-button>
        <el-button @click="dialogMomentSendGodds = false">取 消</el-button>
      </div>
    </el-dialog> -->
    <el-dialog title="发货" :visible.sync="dialogMomentSendGodds" class="moment-send-goods-title">
      <div class="moment-send-goods">
        <div class="send-goods-title">
          <div>
            <span>收货人：</span>
            <p>{{ sendGoods.name }}</p>
          </div>
          <div>
            <span>收货地址：</span>
            <p>{{ sendGoods.receivingAddress }}</p>
          </div>
          <div>
            <span>联系电话：</span>
            <p>{{ sendGoods.phone }}</p>
          </div>
        </div>
        <el-form ref="sendGoods" :model="sendGoods" label-width="90px" :rules="rules">
          <el-form-item label="发货方式：">
            <el-select v-model="sendGoods.company.checked" placeholder="请选择物流方式">
              <el-option
                v-for="(item,i) in sendGoods.company.checkAbout"
                :key="i"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-show="sendGoods.company.checked!=='商家自送'"
            :label="sendGoods.company.checked==='快递发货'?'快递公司：':sendGoods.company.checked==='物流发货'?'物流公司：':''"
          >
            <el-select v-model="sendGoods.type.checked" placeholder="请选择快递公司">
              <el-option
                v-for="(item,i) in sendGoods.type.checkAbout"
                :key="i"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked!=='商家自送'" label="快递单号：" prop="express">
            <el-input v-model="sendGoods.express" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked==='商家自送'" label="联系人：" prop="eName">
            <el-input v-model="sendGoods.eName" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked==='商家自送'" label="联系电话：" prop="ePhone">
            <el-input v-model="sendGoods.ePhone" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureSendGoods('sendGoods')">确认</el-button>
        <el-button @click="dialogMomentSendGodds = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 遮罩层修改价格 -->
    <el-dialog title="修改价格" :visible.sync="dialogChangePriceVisible" class="change-price-title">
      <template v-if="ordershop.orderType === '02300001' || (ordershop.orderType === '02300002' && ordershop.orderperiodization[0].payStatus === '01600001')">
        <div class="change-price">
          <div v-if="ordershop.orderType === '02300002'" style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品尾款：</div>
          <div v-else style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品总价：</div>
          <div class="detail-content">
            <el-input
              v-model="ChangeAllprice"
              placeholder="请输入商品总价"
              @change="validataPrice(ChangeAllprice,'ChangeAllprice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
        <div class="change-price">
          <div style="width:70px;line-height:36px;text-align:right;color:#838A9D;">运费：</div>
          <div class="detail-content">
            <el-input
              v-model="freightPrice"
              placeholder="请输入运费"
              @change="validataPrice(freightPrice,'freightPrice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="change-price">
          <div style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品定金：</div>
          <div class="detail-content">
            <el-input
              v-model="ChangeAllprice"
              placeholder="请输入商品总价"
              @change="validataPrice(ChangeAllprice,'ChangeAllprice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changePrice()">确认</el-button>
        <el-button @click="dialogChangePriceVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDate, getTime } from '@/utils/date';
import { getOrderDetail, update, updateperiodization, getExpressinfo, orderRestUpdate } from '@/api/order';
import { phoneChange } from '@/utils/phone';
import { mapGetters } from 'vuex';
export default {
  filters: {
    getDateHistory: function(value) {
      const date = new Date(value);
      return getDate(date);
    },
    getTimeHistory: function(value) {
      const date = new Date(value);
      return getTime(date, true);
    },
    getDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date, true);
    },
    fiterCoupon: function(value) {
      let price = 0;
      for (const item of value) {
        price += parseFloat(item.value);
      }
      return price;
    },
    orderStatusFilter: function(value) {
      switch (value) {
        case '01500001':
          return '待付款';
        case '01500002':
          return '待发货';
        case '01500003':
          return '待收货';
        case '01500004':
          return '已完成';
        case '01500005':
          return '已取消';
        case '01500006':
          return '已失效';
        case '01500007':
          return '申请退款';
        case '01500008':
          return '已退货';
        case '01500009':
          return '已评价';
        case '01500010':
          return '已删除';
        case '01500011':
          return '已付一期';
        case '01500012':
          return '已付尾款';
        default:
          return '未知情况';
      }
    },
    payTypeFilter: function(value) {
      switch (value) {
        case '01700001':
          return '支付宝支付';
        case '01700002':
          return '微信支付';
        case '01700003':
          return '网银支付';
        default:
          return '未知情况支付';
      }
    },
    countdown: value => {
      const momentTime = new Date();
      const nowtime = (momentTime.getTime() - 1000) / 1000; // 当前时间 毫秒数
      const totalSeconds = value / 1000 - nowtime;

      const day = parseInt(totalSeconds / 3600 / 24); // 天
      let hour = parseInt((totalSeconds / 3600) % 24); // 时
      let minute = parseInt((totalSeconds / 60) % 60); // 分
      let second = parseInt(totalSeconds % 60); // 秒
      hour = addZeroPrefix(hour);
      minute = addZeroPrefix(minute);
      second = addZeroPrefix(second);
      let residueTime =
        day + '天 ' + hour + '时 ' + minute + '分 ' + second + '秒';
      if (totalSeconds < 0) {
        residueTime = '时间到';
      }
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return residueTime;
    }
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'));
      } else {
        const rst = /^1[3456789]\d{9}$/;
        if (rst.test(value)) {
          callback();
        } else {
          callback(new Error('请检查所输入的手机号是否正确！！！'));
        }
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系人'));
      } else {
        const rst = /^[\u4e00-\u9fa5]+$/;
        if (rst.test(value)) {
          callback();
        } else {
          callback(new Error('请输入一个字以上汉字！'));
        }
      }
    };
    return {
      ordershop: {},
      data: {
        goodsNumber: 'BC256854123654',
        goodsState: '等待买家支付尾款',
        createTime: '2020-01-03 11:30:25',
        shelfTime: '2020-02-03 12:32:15',
        orderRemark: '该订单买家急需！需要准时发货！该订单需要准时发货！',
        userMessage:
          '请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！'
      },
      userInfo: {
        name: '小路dew',
        id: '23523524662',
        phone: '17825****98',
        takeUser: '章小胖',
        takePlace: '四川省成都市高新区天府五街美年广场',
        sendName: '德邦物流',
        sendId: '788123619817812',
        sendTime: '2020-01-20 12:33:10'
      },
      orderInfo: {
        payWay: '定金付款',
        payWayCheck1: '定金付款（20%）',
        payWayCheck2: '支付尾款（80%）',
        payWayCheck3: '发货',
        payWayCheck4: '完成',
        payed: '¥200.00',
        wayed: '已微信支付：',
        endWay: '已支付宝支付：',
        endPay: '¥800.00',
        date: '2020-01-03  12:32',
        dated: '2020-02-03'
      },
      active: 2,
      history: [
        { date: 1582870142419, title: '张小平 提交订单' },
        { date: 1582860142319, title: '张小平通过微信支付预付款￥200.00' },
        { date: 1582850142219, title: '张小平通过微信支付预付款￥200.00' },
        { date: 1582840142119, title: '张小平通过微信支付预付款￥200.00' }
      ],
      billInfo: { name: '河北骏途工程技术有限公司', id: 'CDX23523524662' },
      floatMoney: { endMoney: 800.0, freight: 90.0 },
      orderInfoList: [
        {
          img: 'test.jpg',
          name:
            '专业生产盆式橡胶支座 抗震盆式桥梁支座GPZ(KZ)LQZ球形支座阿斯顿发是否是否撒飞洒的发生的发生地方问违反爱疯阿斯顿发是',
          param: 'D80',
          price: 200.0,
          stock: 5,
          allPrice: 1000.0,
          state: 0
        },
        {
          img: 'test.jpg',
          name: '专业生产盆式橡胶支座 抗震盆式桥梁支座GPZ(KZ)LQZ球形支座',
          param: 'D80+黑色',
          price: 150.0,
          stock: 5,
          allPrice: 750.0,
          state: 1
        }
      ],
      // 时间轴线
      reverse: true,
      activities: [
        {
          content: [
            '12:14:45 安徽省宿州市泗县商家 已发出，下一站 重庆运转中心',
            '12:14:45 重庆运转中心 已发出， 下一站 成都运转中心'
          ],
          timestamp: '2018-04-15',
          week: '周三',
          time: '12:14:45',
          title: '运输中'
        },
        {
          content: [
            '12:14:45 安徽省宿州市泗县商家 已收揽',
            '12:14:45 安徽省宿州市泗县商家 已打包'
          ],
          timestamp: '2018-04-13',
          week: '周二',
          time: '12:14:45',
          title: '已揽收'
        },
        {
          content: ['12:14:45 包裹正在等待揽收'],
          timestamp: '2018-04-11',
          week: '周一',
          time: '12:14:45',
          title: '已发货'
        }
      ],
      // 发货
      sendGoods: {
        name: '',
        receivingAddress: '',
        phone: '',
        id: '',
        company: {
          checked: '快递发货',
          checkAbout: [
            {
              name: '快递发货',
              id: '快递发货'
            },
            {
              name: '物流发货',
              id: '物流发货'
            },
            {
              name: '商家自送',
              id: '商家自送'
            }
          ]
        },
        type: {
          checked: '申通快递',
          checkAbout: []
        },
        express: '',
        eName: '',
        ePhone: ''
      },
      dialogMomentSendGodds: false,
      // 修改价格
      ChangeAllprice: '',
      freightPrice: '',
      dialogChangePriceVisible: false,
      changePriceid: '', // 第一层的id
      changePriceChildId: '', // 第2层的id
      // 遮罩层开关
      dialogFormVisible: false,
      textarea: '',
      // 修改时间遮罩层
      dialogChangeTime: false,
      changeDay: '',
      loading: false,
      rules: {
        ePhone: [{ validator: validatePhone, trigger: 'blur' }],
        eName: [{ validator: validateName, trigger: 'blur' }]
      }
    };
  },
  computed: {
    orderMoney3() {
      if (this.active === 3) {
        if (this.ordershop.orderStatus === '01500012') {
          return '待发货';
        } else if (this.ordershop.orderStatus === '01500003') {
          return '已发货';
        } else {
          return '发货';
        }
      } else {
        return '发货';
      }
    },
    ...mapGetters(['shopInfo'])
  },
  watch: {
    'ordershop.orderType': function(newValue, oldValue) {
      if (this.ordershop.orderType === '02300002') {
        this.getTimeList();
      }
    }
  },
  created() {
    this.getDetail();
  },
  beforeDestroy() {
    // 组件的销毁
    window.clearInterval(this.timeId); // 清除定时器
    this.timeId = null;
  },
  methods: {
    validateDay(value) {
      const reg = /^\d+(\.\d+)?$/;
      if (!reg.test(value)) {
        this.$message({
          message: `天数只能为数字型且为正数！`,
          type: 'error',
          showClose: true,
          duration: 4000
        });
        this.changeDay = '';
        return false;
      }
    },
    // 添加备注
    addRemarks() {
      // {id,realAmount//订单金额,shopRemarks//店铺备注}
      const param = {
        id: sessionStorage.getItem('detailId'),
        shopRemarks: this.textarea
      };
      update(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('修改备注成功！');
        } else {
          this.$message.error('修改备注失败！');
        }
        this.dialogFormVisible = false;
        this.getDetail();
      });
    },
    getDetail() {
      this.loading = true;
      const id = sessionStorage.getItem('detailId');
      getOrderDetail({ id }).then(res => {
        this.loading = false;
        if (res.data.ordershop.realAmount <= 0) {
          res.data.ordershop.realAmount = res.data.ordershop.amount;
        }
        if (res.data.ordershop.realFreight <= 0) {
          res.data.ordershop.realFreight = res.data.ordershop.freight;
        }
        this.ordershop = res.data.ordershop;
        this.history = res.data.operation;
        if (res.data.ordershop.orderperiodization[1].payStatus === '01600001' && (res.data.ordershop.orderStatus === '01500012' || res.data.ordershop.orderStatus === '01500003')) {
          this.active = 3;
        }
        if (res.data.ordershop.orderStatus === '01500004') {
          this.active = 4;
        }
        if (res.data.ordershop.orderperiodization[0].payStatus === '01600002' && res.data.ordershop.orderStatus === '01500001') {
          this.active = 1;
        }
        if (res.data.ordershop.orderperiodization[0].payStatus === '01600001' && res.data.ordershop.orderStatus === '01500001') {
          this.active = 2;
        }
      });
    },
    toSaleAfterDetail(value) {
      sessionStorage.setItem('afterSaleDetail', value);
      this.$router.push('/order/detail_after');
    },
    // 立即发货
    sendGoddsMoment(value, id) {
      this.dialogMomentSendGodds = true;
      const param = {
        orderId: value
      };
      this.sendGoods.id = id;
      getExpressinfo(param).then(res => {
        this.sendGoods.name = res.data.userAddress.name;
        this.sendGoods.phone = phoneChange(res.data.userAddress.phone);
        this.sendGoods.receivingAddress = res.data.userAddress.receivingAddress;
        this.sendGoods.type.checkAbout = res.data.express;
      });
    },
    // 1立即发货确认按钮
    sureSendGoods(formName) {
      if (this.sendGoods.company.checked === '商家自送') {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.sureTwo();
          } else {
            this.$message.error('提交失败，请检查电话和用户名是否填写正确!!');
            return false;
          }
        });
      } else {
        if (this.sendGoods.express === '') {
          this.$message.error('请填写快递单号');
        } else {
          this.sureTwo();
        }
      }
    },
    // 2
    sureTwo() {
      this.dialogMomentSendGodds = false;
      // {"id":"","expressId":"快递单号","expressCompany":"快递公司","expressPhone":"快递电话","address":"地址","orderStatus":"01500003"}
      let param = {};
      if (this.sendGoods.company.checked === '商家自送') {
        param = {
          id: this.sendGoods.id,
          expressId: this.sendGoods.eName,
          expressCompany: this.sendGoods.company.checked,
          expressPhone: this.sendGoods.ePhone,
          orderStatus: '01500003',
          shopId: this.shopInfo.id
        };
      } else {
        param = {
          id: this.sendGoods.id,
          expressId: this.sendGoods.express,
          expressCompany: this.sendGoods.type.checked,
          orderStatus: '01500003',
          shopId: this.shopInfo.id
        };
      }
      orderRestUpdate(param)
        .then(res => {
          res.code === '0000'
            ? this.$message.success('发货成功')
            : this.$message.error('发货失败');
          this.sendGoods.type.checked = '';
          this.getDetail();
          this.sendGoods.express = '';
          this.sendGoods.ePhone = '';
          this.sendGoods.eName = '';
        })
        .catch(res => {
          this.$message.error('发货失败！');
        });
    },
    // 修改价格
    changePrice() {
      let param = {};
      if (this.ordershop.orderType === '02300001') {
        param = {
          id: this.changePriceid,
          realAmount: parseFloat(this.ChangeAllprice) * 100,
          realFreight: parseFloat(this.freightPrice) * 100
        };
        if (!this.ChangeAllprice) {
          this.$message.error('商品总价不能为空！');
          return;
        } else if (!this.freightPrice) {
          this.$message.error('商品运费不能为空！');
          return;
        }
        update(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('修改价格成功');
            this.$router.push('/order/list');
          } else {
            this.$message.error('修改价格失败');
          }
          this.dialogChangePriceVisible = false;
        });
      } else {
        if (this.freightPrice === '') {
          param = {
            id: this.changePriceChildId,
            realAmount: parseFloat(this.ChangeAllprice) * 100,
            realFreight: '',
            orderId: this.changePriceid
          };
          if (!this.ChangeAllprice) {
            this.$message.error('商品定金不能为空！');
            return;
          }
        } else {
          param = {
            id: this.changePriceChildId,
            realAmount: parseFloat(this.ChangeAllprice) * 100,
            realFreight: parseFloat(this.freightPrice) * 100,
            orderId: this.changePriceid
          };
          if (!this.ChangeAllprice) {
            this.$message.error('商品尾款不能为空！');
            return;
          } else if (!this.freightPrice) {
            this.$message.error('商品运费不能为空！');
            return;
          }
        }
        updateperiodization(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('修改价格成功');
            this.$router.push('/order/list');
          } else {
            this.$message.error('修改价格失败');
          }
          this.dialogChangePriceVisible = false;
        });
      }
    },
    // 验证修改价格输入框
    validataPrice(value, name) {
      const reg = /^\d+(\.\d+)?$/;
      if (!reg.test(value)) {
        this.$message({
          message:
            name === 'ChangeAllprice'
              ? `商品总价只能为数字型且为正数！`
              : name === 'freightPrice' ? `运费只能为数字型且为正数！` : '未知错误！！',
          type: 'error',
          showClose: true,
          duration: 4000
        });
        this[name] = '';
        return false;
      }
      this[name] = parseFloat(value).toFixed(2);
    },
    // 倒计时
    getTimeList() {
      this.timeId = setInterval(() => {
        this.ordershop.orderperiodization[1].payEndDate = parseFloat(this.ordershop.orderperiodization[1].payEndDate) - 0.01;
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
/deep/.el-input__inner {
  height: 36px;
}
.list-detail {
  $bordercolor: #e9e9e9;
  width: 100%;
  font-size: 14px;
  background: #f1f5f9;
  color: #3c4353;
  margin-bottom: 10px;
  & > .top {
    padding: 36px 8%;
    background: #fff;
    margin-bottom: 10px;
    .lsdl-top {
      margin-bottom: 17px;
      display: flex;
      flex-flow: row;
      & > p {
        margin: 0 1% 0 1%;
        font-size: 18px;
        font-weight: 600;
        color: rgba(60, 67, 83, 1);
        display: flex;
        flex-flow: row nowrap;
        height: 25px;
        line-height: 25px;
        min-width: 250px;
      }
      img {
        width: 28px;
        height: 28px;
      }
      & > div {
        padding-right: 2%;
        padding-left: 2%;
        border-right: 1px solid $bordercolor;
        line-height: 25px;
        display: flex;
        flex-flow: row nowrap;
        height: 25px;
        span {
          min-width: 70px;
          display: inline-block;
        }
        &:last-child {
          border: none;
        }
        & > p {
          min-width: 138px;
        }
      }
    }
    .user-leave-info {
      background: #fef7eb;
      border: 1px solid #fac28a;
      padding: 0px 40px 21px 24px;
      max-width: 93%;
      & > div {
        display: flex;
        margin-bottom: 15px;
        & > h4 {
          padding: 0;
          margin: 0;
          display: flex;
          min-width: 100px;
          line-height: 22px;
          div {
            width: 18px;
            height: 20px;
            margin-right: 8px;
          }
        }
        & > div {
          line-height: 22px;
        }
        & > .el-button {
          min-width: 56px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(24, 144, 255, 1);
          line-height: 22px;
          margin-left: 11px;
          padding: 0;
        }
      }
      .el-icon-caret-top {
        position: relative;
        top: -11px;
        left: 10px;
      }
      .el-icon-caret-top:before {
        color: #fac28a;
      }
    }
  }
  .main {
    .ltdl-main {
      padding: 0 8%;
      background-color: #fff;
      margin-bottom: 20px;
      & > div {
        padding-bottom: 30px;
        padding-left: 50px;
        border-bottom: 1px solid #e4e9ef;
        h3 {
          margin: 0;
          padding-top: 30px;
          padding-bottom: 20px;
          text-indent: 11px;
          background: url("../../../../assets/images/iconbg-nav.png") no-repeat
            0 32px;
          background-size: 5px 12px;
        }
        & > div {
          margin-bottom: 20px;
          font-weight: 400;
          text-align: left;
          text-indent: 11px;
          padding: 10px 15% 0 2%;
        }
      }
      .simple-info {
        & > div {
          display: flex;
          justify-content: space-between;
          padding-right: 14%;
          & > div {
            display: flex;
            align-items: center;
            img {
              margin-left: 5px;
              cursor: pointer;
            }
          }
        }
      }
      .order-info {
        & > div {
          display: flex;
          flex-flow: column nowrap;
          padding-right: 5%;
          .top {
            display: flex;
            position: relative;
            .float-one-goods {
              position: absolute;
              left: 8%;
              top: 20px;
              text-align: center;
              border-radius: 5px;
              width:20%;
              height:33px;
              // display:none;
              div {
                font-weight: 600;
              }
              &>div {
                padding: 9px 22px 9px 0px;
                box-sizing: content-box;
                box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.15);
                width:140px;
                margin-top: -16px;
              }
              p {
                font-size: 12px;
                color: #838a9d;
                margin-top: 10px;
              }
              &::before {
                content: "";
                width: 0;
                height: 0;
                border: 6px solid rgba(0, 0, 0, 0);
                position: relative;
                bottom: -40px;
                left: -30%;
                border-top-color: #fff;
              }
            }
            .float-two-money {
              position: absolute;
              left: 33%;
              top: -35px;
              text-align: center;
              width:20%;
              div {
                font-weight: 600;
              }
              &>div {
                width:180px;
                box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.15);
                padding: 18px 18px 18px 0px;
              }
              p {
                font-size: 12px;
                color: #838a9d;
                margin-top: 10px;
              }
              &::before {
                content: "";
                width: 0;
                height: 0;
                border: 6px solid rgba(0, 0, 0, 0);
                position: relative;
                bottom: -96px;
                left: -30%;
                border-top-color: #fff;
              }
            }
            .float-send-goods {
              position: absolute;
              left: 55%;
              bottom: -55px;
              text-align: center;
              text-indent: -6px;
              width:20%;
              &>div {
                box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.15);
                padding: 18px;
                width:230px;
              }
              &::before {
                content: "";
                width: 0;
                height: 0;
                border: 6px solid rgba(0, 0, 0, 0);
                position: relative;
                bottom: -74px;
                left: -11%;
                border-top-color: #fff;
              }
            }
          }
          .top-title {
            display: flex;
            width: 90%;
            margin-bottom: 20px;
            flex-flow: column nowrap;
            &>div {
              display:flex;
              justify-content: space-between;
              margin-bottom: 20px;
               &>div {
                display:flex;
              }
            }
          }
          .el-icon-caret-bottom {
            position: relative;
            bottom: -13px;
            left: 34%;
            color: #fff;
          }
          .el-steps {
            text-indent: 0px;
            text-align: left;
            margin-top: 50px;
            margin-bottom: 10px;
            /deep/.el-step__head {
              color: #bfbfbf;
              font-size: 12px;
              .el-step__icon {
                background: #bfbfbf;
                text-indent: -999999px;
                border: none;
                width: 10px;
                height: 10px;
              }
            }
            /deep/.el-step__head.is-finish {
              color: #1890ff;
              .el-step__icon {
                text-indent: -999999px;
                background: #1890ff;
                width: 10px;
                height: 10px;
              }
            }
            /deep/.el-step__line {
              margin: -6px 10px 0 10px !important;
            }
          }
          .order-info-first {
            display: flex;
            & > div {
              width: 340px;
              text-align: center;
              p {
                color: #838a9d;
                width: 73%;
                text-align: left;
                margin-left: 24%;
                margin-bottom: 5px;
              }
              & > span {
                display: inline-block;
                width: 800%;
                margin-left: 20%;
                text-align: left;
                margin-bottom: 10px;
              }
            }
          }
          table {
            margin-top: 48px;
            thead {
              background-color: #f9fbfc;

              height: 50px;
              line-height: 50px;
              th {
                border-top: 1px solid #e4e9ef;
                border-bottom: 1px solid #e4e9ef;
                text-align: center;
                &:first-child {
                  border-left: 1px solid #e4e9ef;
                }
                &:last-child {
                  border-right: 1px solid #e4e9ef;
                }
              }
            }
            tbody {
              td {
                border: 1px solid #e4e9ef;
                border-top: none;
                border-right: none;
                text-indent: 0;
                &:last-child {
                  border-right: 1px solid #e4e9ef;
                }
                &:nth-child(2) {
                  border-left: none;
                }
                & > div {
                  min-height: 120px;
                  line-height: 22px;
                  padding: 20px;
                  box-sizing: border-box;
                }
              }
              .table-list-name {
                width: 340px;
                div {
                  width: 257px;
                  text-indent: 0;
                  line-height: 22px;
                }
              }
            }
          }
        }
      }
      .blii-take-info {
        h3 {
          padding-bottom: 0;
        }
        & > div {
          & > .top {
            display: flex;
            margin-top: 20px;
            & > div {
              display: flex;
              span {
                min-width: 90px;
                text-align: right;
              }
              p {
                width: 230px;
              }
            }
          }
          & > .main-content {
            margin-top: 20px;
            background-color: #f6f8f9;
            padding: 25px 25px 33px 84px;
            .el-timeline {
              line-height: 22px;
              .el-timeline-item {
                /deep/.el-timeline-item__node--normal {
                  left: 1px;
                  width: 5px;
                  height: 5px;
                  border: 2px solid #fff;
                  box-sizing: content-box;
                  top: 1px;
                }
                /deep/.el-timeline-item__timestamp {
                  color: #3c4353;
                }
                /deep/.el-timeline-item__wrapper {
                  display: flex;
                  text-indent: 0px;
                  span {
                    display: inline-block;
                    text-indent: -150px;
                    font-weight: 600;
                  }
                  .send-state {
                    display: flex;
                    margin-top: -23px;
                    div {
                      margin-left: 8px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .operate-history {
        & > div {
          display: flex;
        }
      }
    }
    .pre-pay-list {
        td {
          height: 70px;
          border-bottom: 1px solid #e4e9ef;
          &:first-child {
            border-left: 1px solid #e4e9ef;
          }
          &:last-child {
            border-right: 1px solid #e4e9ef;
          }
          &:nth-child(1) {
            padding-left: 40px;
          }
          &:nth-last-child(2),
          &:nth-last-child(1) {
            text-align: center;
          }
        }
      }
  }
  .footer {
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 16px 0 13px 0;
    width: 100%;
    a:nth-child(1) {
      display: inline-block;
      width: 104px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      margin-right: 20px;
      font-size: 14px;
      color: #3c4353;
    }
    a {
      width: 104px;
      height: 40px;
      background: rgba(17, 130, 251, 1);
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      font-weight: 400;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
    }
  }
  // flex居中
  .flexCenter {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-flow:column nowrap;
  }
  //遮罩层
  /deep/.el-dialog {
    width: 600px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 70px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 140px;
  }
}
//遮罩层发货
.moment-send-goods-title {
  font-weight: 400;
  .send-goods-title {
    background: #f6f8f9;
    padding: 20px 0 14px 52px;
    margin-bottom: 30px;
    & > div {
      display: flex;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      p {
        margin: 0;
      }
      span {
        width: 70px;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .el-form {
    margin-left: 52px;
    /deep/.el-form-item__label {
      font-weight: 400;
    }
    /deep/.el-input__inner {
      width: 300px;
      height: 36px;
    }
  }
  /deep/.el-button {
    width: 100px;
    height: 36px;
    padding: 0;
    line-height: 36px;
  }
  /deep/.el-dialog {
    width: 500px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 11px 0 11px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 33px 146px;
  }
}
// 修改价格
.change-price-title {
  .position-yuan {
    position: relative;
    left: -25px;
    color: #838a9d;
  }
  /deep/.el-input__inner {
    width: 160px;
    height: 36px;
    padding-right: 30px;
  }
  .change-price {
    display: flex;
    & > div {
      margin-bottom: 20px;
    }
    .detail-content {
      display: flex;
      line-height: 36px;
    }
  }
  //遮罩层
  /deep/.el-dialog {
    width: 310px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 40px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 40px;
    /deep/.el-button {
      width: 100px;
      height: 36px;
      padding: 0;
      line-height: 36px;
      margin-right: 30px;
      margin-left: 0;
      position: relative;
      &:last-child {
        margin-right: 0;
        left: -4px;
      }
    }
  }
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
.font-weight600 {
  font-weight: 600;
  color: #3c4353 !important;
}
.dialog-change-time {
  /deep/.el-input {
    width: 151px;
    height: 36px;
  }
  /deep/.el-button {
    width: 100px;
    height: 36px;
    padding: 0;
    line-height: 36px;
  }
  .detail-content {
    width: 400px;
    height: 60px !important;
  }
  /deep/.el-input__inner {
    width: 151px;
  }
  /deep/.el-dialog {
    width: 387px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 37px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 80px;
  }
}
</style>
